<template>
  <div class='container'>
    <!-- 卡片区域 -->
  <el-card class="card-box">
   <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px; border-bottom:1px solid #ebeef5; padding-bottom:20px" v-show="reception.subjectName">
    <el-breadcrumb-item>学科管理</el-breadcrumb-item>
    <el-breadcrumb-item>{{reception.subjectName}}</el-breadcrumb-item>
    <el-breadcrumb-item>目录管理</el-breadcrumb-item>
  </el-breadcrumb>
    <!-- 查询区域 -->
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
       <el-form-item label="目录名称">
            <el-input v-model="queryInfo.directoryName" size="small" ></el-input>
     </el-form-item>
        <el-form-item label="状态">
           <el-select v-model="queryInfo.state"  placeholder="请选择"  size="small">
              <el-option
                 v-for="item in status"
                 :key="item.value"
                 :value="item.value"
                 :label="item.label"
              ></el-option>
            </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit" size="small">清除</el-button>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
      </el-form-item>
        <el-button type="success" icon="el-icon-edit" size="small" style="float:right; margin-left:10px" @click="addDate">新增目录</el-button>
         <!-- 返回学科 -->
          <span style="float:right" v-show="reception.subjectName">
            <i class="el-icon-back" style="color:#40b8ff"></i>
            <el-button type="text" @click="$router.back()">返回学科</el-button>
          </span>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
        >
      </el-alert>
      <!-- 表格区域 -->
      <el-table
      :data="listItem"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        >
      </el-table-column>
       <el-table-column
        prop="subjectName"
        label="所属学科"
        >
      </el-table-column>
       <el-table-column
        prop="directoryName"
        label="目录名称"
        >
      </el-table-column>
       <el-table-column
        prop="username"
        label="创建者"
        >
      </el-table-column>
       <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
      </el-table-column>
       <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
       <el-table-column label="状态">
        <template slot-scope="scope">
        <span v-if="scope.row.state=== 1">已启用</span>
        <span v-else>已禁用</span>
        </template>
      </el-table-column>
       <el-table-column label="操作">
           <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              class="set"
              @click="stateChange(scope.row)"
              >{{ scope.row.state === 0 ? '启用' : '禁用' }}</el-button
            >
            <el-button
              type="text"
              size="mini"
              class="set"
              :disabled="scope.row.state === 1 ? true : false"
              @click="handledirectorys(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="mini"
              class="set"
              :disabled="scope.row.state === 1 ? true : false"
              @click="deletedirectorys(scope.row)"
              >删除</el-button
            >
          </template>
      </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 增加对话框 -->
      <el-dialog
        title="新增目录"
        :visible.sync="dialogVisible"
        width="30%"
      >
     <el-form label-width="80px" :model="addForm" :rules="rules">
        <el-form-item label="所属学科" style="width:100%" v-show="!reception.subjectName" >
          <el-select v-model="addForm.subjectID"  placeholder="请选择"  size="small" style="width:100%">
            <el-option
              v-for="item in easyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="目录名称" style="width:100%"  prop="directoryName">
         <el-input v-model="addForm.directoryName" style="width:100%" size="small" placeholder="请输入目录名称" maxlength="5"></el-input>
</el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="affirm">确 认</el-button>
  </span>
     </el-dialog>
     <!-- 修改对话框 -->
     <el-dialog
       title="新增目录"
       :visible.sync="dialogTwoVisible"
       width="30%"
>
<el-form label-width="80px" :model="upDateTwo" :rules="rules">
  <el-form-item label="所属学科" style="width:100%"  v-show="!reception.subjectName">
    <el-select v-model="upDateTwo.subjectID"  placeholder="请选择"  size="small" style="width:100%">
          <el-option
              v-for="item in easyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          ></el-option>
    </el-select>
  </el-form-item>
<el-form-item label="目录名称" style="width:100%"  prop="directoryName" >
    <el-input v-model="upDateTwo.directoryName" style="width:100%" size="small" placeholder="请输入目录名称" maxlength="5"></el-input>
</el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogTwoVisible = false">取 消</el-button>
    <el-button type="primary" @click="affirmTwo">确 认</el-button>
  </span>
     </el-dialog></el-card>
</div>
</template>
<script>
import { list, add, changeState, update, remove } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
export default {
  created () {
    this.getList()
    this.getEastList()
    this.reception.subjectID = this.$route.query.id
    this.reception.subjectName = this.$route.query.name
    if (this.reception.subjectID) {
      this.queryInfo.subjectID = this.reception.subjectID
      this.queryInfo.subjectName = this.reception.subjectName
      this.getList()
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogTwoVisible: false,
      queryInfo: {
        page: 1, // 当前页码大小
        pagesize: 5, // 页码大小
        subjectName: ''
      },
      // state: '',
      listItem: [], // 列表数据
      total: 0, // 总条数
      easyList: [],
      upDateTwo: {
        subjectID: '',
        directoryName: ''
      },
      reception: {},
      addForm: {},
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // 获取数据
    async getList () {
      try {
        const { data } = await list(this.queryInfo)
        // console.log(data);
        this.listItem = data.items
        // console.log(this.listItem)
        this.total = data.counts
      } catch (err) {
        this.$message('获取数据失败')
      }
    },
    // 清除点击事件
    onSubmit () {
      this.queryInfo.directoryName = ''
      this.getList()
    },
    // 搜索点击事件
    search () {
      this.getList(this.queryInfo)
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getList()
    },
    // 获取Select框数据
    async  getEastList () {
      try {
        const { data } = await simple()
        console.log(data)
        this.easyList = data
      } catch (err) {
        this.$message('获取数据失败')
      }
    },
    addDate () {
      this.dialogVisible = true
    },
    // 确认框
    async affirm () {
    // console.log(this.addForm)
      if (this.reception.subjectID) {
        this.addForm.subjectID = parseInt(this.reception.subjectID)
        await add(this.addForm)
        this.dialogVisible = false
        this.getList()
      } else {
        await add(this.addForm)
        this.dialogVisible = false
        this.getList()
      }
    },
    // 禁用启用
    async stateChange (val) {
      if (val.state === 0) {
        val.state = 1
      } else {
        val.state = 0
      }
      var data = {
        id: val.id,
        state: val.state
      }
      await changeState(data)
      this.getList()
    },
    // 修改
    handledirectorys (val) {
      // console.log(val);
      this.upDateTwo.id = val.id
      this.upDateTwo.subjectID = val.subjectID
      this.upDateTwo.directoryName = val.directoryName
      this.dialogTwoVisible = true
    //
    },
    // 确认修改
    async affirmTwo () {
      if (this.reception.subjectID) {
        this.upDateTwo.subjectID = parseInt(this.reception.subjectID)
        const upDates = {
          id: this.upDateTwo.id,
          subjectID: this.upDateTwo.subjectID,
          directoryName: this.upDateTwo.directoryName
        }
        await update(upDates)
        this.getList()
        this.dialogTwoVisible = false
      } else {
        const upDates = {
          id: this.upDateTwo.id,
          subjectID: this.upDateTwo.subjectID,
          directoryName: this.upDateTwo.directoryName
        }
        await update(upDates)
        this.getList()
        this.dialogTwoVisible = false
      }
    },
    // 删除
    async deletedirectorys (val) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(val)
          this.getList()
          this.$message.success('成功删除了目录')
        } catch (err) {
          this.$message.error('删除失败!')
        }
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  .card-box{
    margin-top: 10px;
  }
  .set {
  border: 0;
  background-color: #fff;
  font-size: 14px;
}
/deep/ .el-dialog__footer {
  text-align: right;
}
 .el-pagination{
  text-align: right;
}
}
</style>
